<template>
	<view class="box">
		<view class="top flex">
			<view class="f28">提现到</view>
			<picker @change="chooseApplyType" :value="index" :range="list">
				<view class="picker f-w">
					<view>{{F}}</view>
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_264.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>
		<view class="content">
			<view class="card1">
				<view class="title f24">提现金额</view>
				<view class="num f-w">
					<view>￥</view>
					<view><input type="digit" v-model="money"></view>
				</view>
				<view class="num2 fw-bt">
					<view class="f24 c999">可提现金额{{total}}元,最低提现{{extractInfo.user_extract_min}}元</view>
					<view class="f28" @click="getAll">全部提现</view>
				</view>
			</view>

		</view>
		<view class="bg2"></view>
		<view class="content2" v-if="isShow">
			<view class="demo fw-bt ">
				<view>选择开户行：</view>
				<picker @change="checkBank" :value="index" :range="bank_list" range-key="name">
					<view class="f-w">
						<view>
							<input type="text" v-model="bank_name" placeholder="请选择开户行" disabled>
						</view>
						<view class="img f-w">
							<image src="https://jw.xzsw2021.com/static/user/icon_162@2x.png" mode=""></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="demo fw-bt">
				<view>输入开户人姓名：</view>
				<view class="right">
					<input type="text" v-model="username" placeholder="请输入开户人姓名">
				</view>
			</view>
			<view class="demo fw-bt">
				<view>输入银行卡号：</view>
				<view class="right">
					<input type="idcard" v-model="cardId" placeholder="请输入银行卡号">
				</view>
			</view>
		</view>
		<view class="btn" @click="goTixian" v-if="F == '银行卡'">立即提现</view>
		<view class="btn" @click="goTixian2" v-else>立即提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['微信零钱', '银行卡'],
				bank_list: [], //银行列表
				bank_name: '', //
				F: '微信零钱', //提现方式
				isShow: false, //
				total: 0, //总
				money: '', //
				username: '', //用户名
				cardId: '', //银行卡号
				extractInfo: {}
			}
		},
		computed: {

		},
		onLoad() {
			this.getbanklist()
			this.check()
		},
		methods: {
			getbanklist() {
				this.$request('user/extract/banklst', {}, 'GET').then(res => {
					this.bank_list = res.data
				})
			},
			check() {
				this.$request('user/spread_info', {}, 'GET').then(res => {
					this.extractInfo = res.data
					this.total = res.data.total_brokerage_price
				})
			},
			// 选择提现方式
			chooseApplyType(e) {
				console.log(e);
				let index = e.detail.value * 1;
				this.F = this.list[index];
				console.log(this.list[index])
				if (index === 0) {
					this.isShow = false;
				} else {
					this.isShow = true;
				}
			},
			// 选择银行
			checkBank(e) {
				let index = e.detail.value * 1;
				this.bank_name = this.bank_list[index].name;
			},
			// 全部提现
			getAll() {
				this.money = this.total;
			},
			goTixian2() {
				let config = uni.getStorageSync('init')
				if (config.sys_extension_type != 1) {
					this.$showToast('未开启微信提现设置')
					return
				}
				this.money = Number(this.money)
				if (isNaN(this.money)) {
					this.money = 0
				}
				if (this.money < Number(this.extractInfo.user_extract_min)) {
					this.$showToast(`单次最低提现金额最少为${Number(this.extractInfo.user_extract_min)}元`)
					return;
				}
				

				let data = {
					extract_price: this.money,
					extract_type: 3
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/extract/create', data).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/state/success/success?type=14'
						})
					}
				})
			},
			// 立即提现
			goTixian() {
				if (!this.money || this.money * 1 <= 0) {
					this.$showToast('请输入大于0的提现金额')
					return
				}
				console.log("asdasfd")
				if (this.isShow) {
					if (!this.bank_name) {
						this.$showToast('请选择开户行')
						return
					}
					if (!this.username) {
						this.$showToast('请输入开户行姓名')
						return;
					}
					if (!this.cardId) {
						this.$showToast('请输入银行卡号')
						return;
					}
				}
				this.money = Number(this.money)
				if (isNaN(this.money)) {
					this.money = 0
				}
				if (this.money < Number(this.extractInfo.user_extract_min)) {
					this.$showToast(`单次最低提现金额最少为${Number(this.extractInfo.user_extract_min)}元`)
					return;
				}
				let data = {
					bank_address: this.bank_name,
					bank_code: this.cardId,
					extract_price: this.money,
					extract_type: 0,
					real_name: this.username
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/extract/create', data).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/state/success/success?type=14'
						})
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.top {
			justify-content: space-between;
			height: 150rpx;
			padding: 55rpx 30rpx 0;
			background: #109C7A;
			color: #fff;

			&>view {
				height: 42rpx;
			}

			.img {
				margin-left: 30rpx;
				width: 12rpx;
				height: 19rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.picker {
				// width: 200rpx;
				// height: 40rpx;
			}
		}

		.content {
			margin: -50rpx auto 0;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			overflow: hidden;

			.card1 {
				padding: 0 0 50rpx;
				overflow: hidden;

				.title {
					margin-top: 40rpx;
				}

				.num {
					padding: 30rpx 0 40rpx;
					border-bottom: 1rpx solid #EEEEEE;
					font-size: 60rpx;

					input {
						height: 60rpx;
						font-size: 60rpx;
					}
				}

				.num2 {
					margin: 10rpx 0;

					.f28 {
						color: #109C7A;
					}
				}
			}

		}

		.bg2 {
			height: 20rpx;
			background-color: #F5F5F5;
		}

		.content2 {
			padding: 0 30rpx;

			.img {
				margin-left: 25rpx;
				width: 15rpx;
				height: 28rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.demo {
				padding: 46rpx 0;
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;

				.right {
					margin-left: 20rpx;
					flex: 1;
				}

				input {
					width: 100%;
					font-size: 28rpx;
					text-align: right;
				}
			}
		}

		.btn {
			margin: 90rpx auto 0;
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			background: linear-gradient(64deg, #2BCCA5, #22B591);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
			border-radius: 10rpx;
		}
	}
</style>
